<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>

<div id="test2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //指定全局指令
    //el：指令属性所在的标签对象
    //binding：包含指令相关信息的数据对象
    Vue.directive('upper-text',function (el,binding) {
        console.log(el,binding)
        el.textContent = binding.value.toUpperCase()
    })
    new Vue({
        el:'#test1',
        data:{
            msg1:'NBA I Love This Game！'
        },
        directives:{
            'lower-text'(el,binding) {  //注册局部指令:只在当前vm范围内有效
                el.textContent = binding.value.toLowerCase()
            }
        }
    })

    new Vue({
        el:'#test2',
        data:{
            msg2:'Just Do it'
        }
    })
</script>
</body>
</html>